<template>
  <ul class="thrdctgy">
    <li
      class="thrdctgy-item"
      v-for="(thrdctgy, index) in isReadOpen ? subthrdctgys : thrdCtgys"
      :key="thrdctgy.thirdctgyid"
    >
      <span class="thirdctgyname">{{ thrdctgy.thirdname }}</span>
      <i class="iconfont icon-shuxian" v-if="(index + 1) % 3 !== 0"></i>
    </li>
    <li
      :class="{ readopen: isReadOpen, readcollapse: !isReadOpen }"
      @click="openOrCollapse($event, secondctgy)"
    >
      <span v-show="isReadOpen">
        展开 <i class="iconfont icon-xiangxiajiantou"></i
      ></span>
      <span v-show="!isReadOpen"
        >收起 <i class="iconfont icon-xiangshangjiantou"></i
      ></span>
    </li>
  </ul>
</template>

<script setup lang="ts">
import type { SecondCtgy, ThirdCtgy } from "@/store/ctgy/state"
import FirstToThirdCtgy from "../service"
const { openOrCollapse } = FirstToThirdCtgy
defineProps<{
  isReadOpen: boolean
  secondctgy: SecondCtgy // 2级分类
  thrdCtgys: ThirdCtgy[] // 所有的3级分类
  subthrdctgys: ThirdCtgy[] // 最多只有5项的3级分类
}>()
</script>

<style lang="scss" scoped>
.thrdctgy {
  display: grid;
  padding: 0rem 0.05rem 0rem 0.1rem;
  grid-template-columns: 1.18rem 1.1rem 1.25rem;
  position: relative;

  &-item {
    padding: 0.2rem 0;
    text-align: center;
    display: flex;

    .thirdctgyname {
      flex-grow: 1;
    }

    .icon-shuxian {
      position: relative;
      top: 0.02rem;
    }
  }

  .readopen {
    width: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;

  }
  .icon-xiangxiajiantou,
  .icon-xiangshangjiantou {
    border: 1px solid gray;
    border-radius: 50%;
  }

  .readcollapse {
    position: absolute;
    left: calc(1.18rem + 1.1rem + 0.525rem);
    bottom: 0.18rem;
  }
}
</style>
